<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <script src="https://cdn.tailwindcss.com"></script>
    <title>beijin weather</title>
</head>

<body>
    <div class="flex flex-col rounded-[23px] items-center justify-between w-[400px] h-[350px] bg-slate-200 p-7">
        <div class="flex w-[400px] px-7 justify-between">
            <div class="flex flex-col w-[60px] h-[50px] bg-slate-200">
                <h1>今天</h1>
                <h2>9月2日</h2>
            </div>
            <div>
                <img class="w-[60px] h-[50px]" src="images//太阳.png" alt="">
            </div>
            <div class="flex bg-slate-200 w-[150px] h-[50px] items-center">
                <h1>33°</h1>
                <h1 class="bg-gradient-to-r from-[#6e8efb] to-[#a777e3] rounded-[23px] w-[130px] h-[7px]"></h1>
                <h1>24°</h1>
            </div>
            <div>
                <img class="w-[50px] h-[50px]" src="images//开始.png" alt="">
            </div>
        </div>
        <div class="flex w-[400px] px-7 justify-between">
            <div class="flex flex-col w-[60px] h-[50px] bg-slate-200">
                <h1>周三</h1>
                <h2>9月3日</h2>
            </div>
            <div>
                <img class="w-[50px] h-[40px]" src="images//大雨.png" alt="">
            </div>
            <div class="flex bg-slate-200 w-[150px] h-[50px] items-center">
                <h1>33°</h1>
                <h1 class="bg-gradient-to-r from-[#6e8efb] to-[#a777e3] rounded-[23px] w-[130px] h-[7px]"></h1>
                <h1>25°</h1>
            </div>
            <div>
                <img class="w-[50px] h-[50px]" src="images//开始.png" alt="">
            </div>
        </div>
        <div class="flex w-[400px] px-7 justify-between">
            <div class="flex flex-col w-[60px] h-[50px] bg-slate-200">
                <h1>周四</h1>
                <h2>9月4日</h2>
            </div>
            <div>
                <img class="w-[50px] h-[40px]" src="images//大雨.png" alt="">
            </div>
            <div class="flex bg-slate-200 w-[150px] h-[50px] items-center">
                <h1>32°</h1>
                <h1 class="bg-gradient-to-r from-[#6e8efb] to-[#a777e3] rounded-[23px] w-[130px] h-[7px]"></h1>
                <h1>26°</h1>
            </div>
            <div>
                <img class="w-[50px] h-[50px]" src="images//开始.png" alt="">
            </div>
        </div>
        <div class="flex w-[400px] px-7 justify-between">
            <div class="flex flex-col w-[60px] h-[50px] bg-slate-200">
                <h1>周五</h1>
                <h2>9月5日</h2>
            </div>
            <div>
                <img class="w-[55px] h-[45px]" src="images//浓云.png" alt="">
            </div>
            <div class="flex bg-slate-200 w-[150px] h-[50px] items-center">
                <h1>35°</h1>
                <h1 class="bg-gradient-to-r from-[#6e8efb] to-[#a777e3] rounded-[23px] w-[130px] h-[7px]"></h1>
                <h1>26°</h1>
            </div>
            <div>
                <img class="w-[50px] h-[50px]" src="images//开始.png" alt="">
            </div>
        </div>
        <div class="flex w-[400px] px-7 justify-between">
            <div class="flex flex-col w-[60px] h-[50px] bg-slate-200">
                <h1>周六</h1>
                <h2>9月6日</h2>
            </div>
            <div>
                <img class="w-[55px] h-[45px]" src="images//天气-7.png" alt="">
            </div>
            <div class="flex bg-slate-200 w-[150px] h-[50px] items-center">
                <h1>31°</h1>
                <h1 class="bg-gradient-to-r from-[#6e8efb] to-[#a777e3] rounded-[23px] w-[130px] h-[7px]"></h1>
                <h1>26°</h1>
            </div>
            <div>
                <img class="w-[50px] h-[50px]" src="images//开始.png" alt="">
            </div>
        </div>
    </div>
</body>